<template>
    <div class="VillageDetail" v-loading="trackLoad">
        <el-row>
          <!-- 后面还要继续放开 -->
            <div style="text-align: left;" v-if="isHasTask && user.roleCode === 'TOWN_REVIEWER'">
                <!-- <el-button type="primary" style="display: inline-block" @click="addVillage()">添加</el-button> -->
                <el-button type="warning" style="display: inline-block" @click="leaveVillage()">离任</el-button>
            </div>
            <el-col :span="24" style="padding: 0;margin-top: -20px;">
                <div v-for="(item, index) in zhenList" :class="currentTownIndex === index ? 'town-btn-active1' : 'town-btn1'">
                    <el-button type="text" @click.native="initCadresList(item.districtId, index)">{{item.districtName}}
                    </el-button>
                </div>
            </el-col>
            <el-col :span="24" style="padding: 0;margin-top: 10px;">
                <div v-for="(item, index) in villageList" :class="currentCunIndex === index ? 'town-btn-active2' : 'town-btn2'" @click="initCadresList1(item, index)">
                  <!-- <el-badge :value="item.cuurentlyCardesNumer" class="badge_item"> -->
                    <el-button type="text" >{{item.districtName.substring(0,item.districtName.length-2)}} 
                      <!-- <el-tooltip  :popper-class="`badge_tooltip ${item.cuurentlyCardesNumer > item.cardesNumer ? 'badge_tooltip_great' : 'badge_tooltip_less'}`" effect="light" placement="top-start"> -->
                        <!-- <div slot="content">规定{{item.cardesNumer}}人<br/>现有{{item.cuurentlyCardesNumer}}人</div> -->
                        <!-- <span :class="`badge_item ${item.cuurentlyCardesNumer > item.cardesNumer ? 'badge_item_great' : (currentCunIndex === index ?  'badge_item_active' : 'badge_item_less')}`">{{item.cuurentlyCardesNumer}}</span> -->
                      <!-- </el-tooltip> -->
                    </el-button>
                  <!-- </el-badge> -->
                </div>
            </el-col>
            <el-col :span="24" style="padding: 0">
                <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs" style="width: 100%;padding-top: 20px;" >
                    <swiper-slide v-for="item in cadList" :key="item.id + '1'">
                        <div class="head-list-item">
                            <img :src="item.headSculpture"  width="150" height="225" alt="头像"/>
                            <div class="name-post">
                                <div style="font-size: 12px;color: white">
                                    {{item.districtName || "暂无" }} --
                                    <span style="font-size: 12px;color: white"> {{item.name || "暂无"}} </span>
                                </div>
                            </div>
                        </div>
                    </swiper-slide>
                    <div class="swiper-button-next " slot="button-next"></div>
                    <div class="swiper-button-prev" slot="button-prev"></div>
                </swiper>
                <ReserveEdit v-if="isEdit"  :isHasTask="isHasTask" :currentSecretary="currentSecretary" :endTime="endTime"></ReserveEdit>
                <swiper v-else class="swiper gallery-top swiper-no-swiping" :options="swiperOptionTop" ref="swiperTop">
                    <swiper-slide v-for="item in cadList" :key="item.id">
                        <div style="text-align: left;font-size: 18px;font-weight: bold;margin-bottom: 10px;margin-top: 10px">
                            <el-tag size="large" style="width:245px;text-align: center" v-if="item.state === '0'" close-transition type="danger"  effect="dark">当前状态：待提交</el-tag>
                            <el-tag size="large" style="width:245px;text-align: center" v-else-if="item.state === '1'" close-transition  type="warning"  effect="dark">当前状态：待镇党委审核</el-tag>
                            <el-tag size="large" style="width:245px;text-align: center" v-else-if="item.state === '2'" close-transition  type="primary"  effect="dark">当前状态：待市委审核</el-tag>
                            <el-tag size="large" style="width:245px;text-align: center" v-else-if="item.state === '3'" close-transition  type="success"  effect="dark">当前状态：市委审核通过</el-tag>
                            <el-popover  placement="right"  width="400" trigger="click">
                                <el-timeline style="height: 350px;padding-top: 10px;overflow-y: scroll">
                                    <el-timeline-item
                                        v-for="(activity, index) in activities"
                                        :key="index"
                                        :color="activity.color"
                                        :timestamp="activity.modifiedAt">
                                        <div>
                                            <el-tag v-if="activity.status == '0'" close-transition type="success"  effect="dark">编辑</el-tag>
                                            <el-tag v-else-if="activity.status == '2'" close-transition  type="primary"  effect="dark">提交</el-tag>
                                            <el-tag v-else close-transition  type="danger"  effect="dark">审核</el-tag>
                                            {{activity.auditor}}
                                            {{activity.auditAdvice}}
                                        </div>
                                    </el-timeline-item>
                                </el-timeline>
                                <el-button slot="reference" type="text" @click="shRcord(item.id)" >信息更新记录</el-button>
                            </el-popover>
                            <div style="float: right;padding-right: 25px">
                                <div style="display: inline-block;font-size: 16px;color: red">
                                    <p v-show="isHasTask">友情提示: 村干部信息更新任务已发布（<span style="color: goldenrod;font-weight: bold;text-decoration: underline">截止日期{{endTime}}</span>），当前信息可进行修改、保存、提交等操作！</p>
                                    <p v-show="!isHasTask">友情提示: 村干部信息更新任务未发布，当前信息不可进行修改、保存、提交等操作！</p>
                                </div>
                            </div>
                        </div>
                        <el-form label-position="right" label-width="80px" :model="item">
                            <el-row :gutter="10" style="margin-top: 20px">
                                <el-col :span="4">
                                    <el-card shadow="hover" style="height: 320px"  >
                                        <el-image :src=item.headSculpture style="width: 160px;height: 240px;margin-top:20px "></el-image>
                                        <div class="name-post1" style="width: 160px;height: 45px;display: inline-block;top: 0px;">
                                            <div style="font-size: 14px;color: black">
                                                {{item.districtName || "暂无" }} --
                                                <span style="font-size: 14px;color: black"> {{item.name || "暂无"}} </span>
                                            </div>
                                        </div>
                                    </el-card>
                                </el-col>
                                <el-col :span="10">
                                    <el-card shadow="hover" style="height: 320px;" class="baseMassage">
                                        <div class="cardTitleStyle">
                                            <el-image  class="smallTitle" src="../../../static/img/jbry.png"></el-image>
                                            <p>基本信息</p>
                                        </div>
                                        <el-col :span="12">
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">性别</span>
                                                <span class="baseVal">{{item.sex||"暂无"}}</span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">出生日期</span>
                                                <span class="baseVal">{{item.birth||"暂无"}}</span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">民族</span>
                                                <span class="baseVal">{{item.nation||"暂无"}}</span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">籍贯</span>
                                                <span class="baseVal">{{item.nativePlace||"暂无"}}</span>
                                            </div>
                                        </el-col>
                                        <el-col :span="12">
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">身份证号</span>
                                                <span class="baseVal">{{item.identityCard||"暂无"}}
                                                <el-popover
                                                    v-show="item.identityCardAnnex"
                                                    placement="right"
                                                    width="330"
                                                    trigger="hover">
                                                    <div v-for="subItem in handleImage(item.identityCardAnnex)" >
                                                        <el-image :src="subItem"></el-image>
                                                    </div>
                                                    <el-button slot="reference" type="text"><i class="el-icon-picture"></i></el-button>
                                                </el-popover>
                                            </span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">联系电话</span>
                                                <span class="baseVal">{{item.contact||"暂无"}}</span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">医疗保险</span>
                                                <span class="baseVal">{{item.medicalInsurance||"暂无"}}</span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">养老保险</span>
                                                <span class="baseVal">{{item.socialSecurityDatabases||"暂无"}}</span>
                                            </div>
                                        </el-col>
                                    </el-card>
                                </el-col>
                                <el-col :span="10">
                                    <el-card shadow="hover" style="height: 320px" class="workMessage">
                                        <div class="cardTitleStyle">
                                            <el-image  class="smallTitle" src="../../../static/img/gz.png"></el-image>
                                            <p>基本工作信息</p>
                                        </div>
                                        <el-col :span="12">
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">担任职务</span>
                                                <el-tooltip :content="handlePost(item.cadresPost)" placement="top" v-if="item.cadresPost&&handlePost(item.cadresPost).length>12">
                                                    <span class="baseVal">{{handlePost(item.cadresPost).substring(0,11)}}...</span>
                                                </el-tooltip>
                                                <span class="baseVal" v-else>{{handlePost(item.cadresPost)}}</span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">政治面貌</span>
                                                <span class="baseVal">{{item.politicalOutlook||"暂无"}}</span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">学历</span>
                                                <span class="baseVal">{{item.fullTimeEdu||"暂无"}}
                                                    <el-popover
                                                        v-show="item.educationAnnex"
                                                        placement="right"
                                                        width="330"
                                                        trigger="hover">
                                                        <div  style="height: 600px;overflow-x: scroll">
                                                            <div v-for="subItem in handleImage(item.educationAnnex)" >
                                                                <el-image :src="subItem"></el-image>
                                                            </div>
                                                        </div>
                                                        <el-button slot="reference" type="text"><i  class="el-icon-picture"></i></el-button>
                                                    </el-popover>
                                                </span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">毕业院校</span>
                                                <span class="baseVal">{{item.fullTimeSchool||"暂无"}}</span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">是否村委会委员</span>
                                                <span class="baseVal">{{item.memberOfCommittee||"暂无"}}</span>
                                            </div>
                                        </el-col>
                                        <el-col  :span="12">
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">在村工作年限</span>
                                                <span class="baseVal">{{item.onDutyTime?item.onDutyTime+'年':"暂无"}}
                                                    <el-popover
                                                        v-show="item.workTimeAnnex"
                                                        placement="right"
                                                        width="330"
                                                        trigger="hover">
                                                        <div v-for="subItem in handleImage(item.workTimeAnnex)" >
                                                            <el-image :src="subItem"></el-image>
                                                        </div>
                                                        <el-button slot="reference" type="text"><i  class="el-icon-picture"></i></el-button>
                                                    </el-popover>
                                                </span>
                                            </div>
                                            <div class="baseInfoDiv" v-if="item.politicalOutlook=='党员'">
                                                <span class="baseLabel">入党时间</span>
                                                <span class="baseVal">{{item.partyTime||"暂无"}}
                                                <el-popover
                                                    v-show="item.partyTimeAnnex"
                                                    placement="right"
                                                    width="330"
                                                    trigger="hover">
                                                    <div v-for="subItem in handleImage(item.partyTimeAnnex)" >
                                                        <el-image :src="subItem"></el-image>
                                                    </div>
                                                    <el-button slot="reference" type="text"><i  class="el-icon-picture"></i></el-button>
                                                </el-popover>
                                            </span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">健康状况</span>
                                                <span class="baseVal">{{item.health||"暂无"}}</span>
                                            </div><div class="baseInfoDiv">
                                                <span class="baseLabel">薪酬等级</span>
                                                <span class="baseVal">{{item.wageScale||"暂无"}}</span>
                                                <el-popover
                                                    v-show="item.wageScaleAnnex"
                                                    placement="right"
                                                    width="330"
                                                    trigger="hover">
                                                    <div v-for="subItem in handleImage(item.wageScaleAnnex)" >
                                                        <el-image :src="subItem"></el-image>
                                                    </div>
                                                    <el-button slot="reference" type="text"><i  class="el-icon-picture"></i></el-button>
                                                </el-popover>
                                            </div>
                                            <!-- <div class="baseInfoDiv">
                                                <span class="baseLabel">专技职称</span>
                                                <span class="baseVal">{{item.professionalTitle||"暂无"}}
                                                 <el-popover
                                                     v-show="item.professionalTitleAnnex"
                                                     placement="bottom"
                                                     width="330"
                                                     trigger="hover">
                                                     <div v-for="subItem in handleImage(item.professionalTitleAnnex)" >
                                                        <el-image :src="subItem"></el-image>
                                                    </div>
                                                    <el-button slot="reference" type="text"><i  class="el-icon-picture"></i></el-button>
                                                </el-popover>
                                            </span>
                                            </div> -->
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">是否村党组织委员</span>
                                                <span class="baseVal">{{item.memberOfPart||"暂无"}}</span>
                                            </div>
                                        </el-col>
                                    </el-card>
                                </el-col >
                            </el-row>
                        </el-form>
                        <el-row :gutter="40" style="margin-top: 40px">
                            <el-col :span="8">
                              <el-card shadow="hover"  class="repaid">
                                <div class="cardTitleStyle">
                                    <el-image  class="smallTitle" src="../../../static/img/csj/bc.png"></el-image>
                                    <p>社会保险信息</p>
                                </div>
                                <!-- <div class="insurance_box">
                                  <div class="baseInfoDiv insurance_line">
                                    <span class="baseLabel">医疗保险</span>
                                    <span class="baseVal">{{item.medicalInsurance||"暂无"}}</span>
                                  </div>
                                  <div class="baseInfoDiv insurance_line">
                                    <span class="baseLabel">参保时间</span>
                                    <span class="baseVal">{{item.insuredTime||"暂无"}}</span>
                                  </div>
                                  <div class="baseInfoDiv insurance_line">
                                    <span class="baseLabel">缴费年限(月)</span>
                                    <span class="baseVal">{{item.insurancePaymentPeriod ? item.insurancePaymentPeriod + '月' : "暂无"}}</span>
                                  </div>
                                  <div class="baseInfoDiv insurance_line">
                                    <el-tooltip class="item" effect="dark" content="当前一级账户余额" placement="top">
                                      <span class="baseLabel">当前一级账...</span>
                                    </el-tooltip>
                                    <span class="baseVal">{{item.primaryAccountBalance||"暂无"}}</span>
                                  </div>
                                  <div class="baseInfoDiv insurance_line">
                                    <el-tooltip class="item" effect="dark" content="当前二级账户余额" placement="top">
                                      <span class="baseLabel">当前二级账...</span>
                                    </el-tooltip>
                                    <span class="baseVal">{{item.secondaryAccountBalance||"暂无"}}</span>
                                  </div>
                                  <div class="baseInfoDiv insurance_line">
                                    <el-tooltip class="item" effect="dark" content="当前医保账户余额" placement="top">
                                      <span class="baseLabel">当前医保账...</span>
                                    </el-tooltip>
                                    <span class="baseVal">{{item.insuranceAccountBalance||"暂无"}}</span>
                                  </div>
                                </div> -->
                                  <div class="baseInfoDiv insurance_line">
                                    <span class="baseCardLabel">养老保险</span>
                                    <span class="baseCardVal">{{item.socialSecurityDatabases||"暂无"}}</span>
                                  </div>
                                  <div class="baseInfoDiv insurance_line">
                                    <span class="baseCardLabel">缴费年限</span>
                                    <span class="baseCardVal">{{item.paymentPeriod||"暂无"}}</span>
                                  </div>
                                  <div class="baseInfoDiv insurance_line">
                                    <el-tooltip class="item" effect="dark" content="上年账户累计储存额" placement="top">
                                      <span class="baseCardLabel">上年账户...</span>
                                    </el-tooltip>
                                    <span class="baseCardVal">{{item.depositBalance||"暂无"}}</span>
                                  </div>
                                  <div class="baseInfoDiv insurance_line">
                                    <span class="baseCardLabel">在职/退休</span>
                                    <span class="baseCardVal">{{item.hasOnTheJob||"暂无"}}</span>
                                  </div>
                                  <div v-if="item.retirementWage" class="baseInfoDiv insurance_line">
                                    <span class="baseCardLabel">退休工资</span>
                                    <span class="baseCardVal">{{item.retirementWage}}</span>
                                  </div>
                              </el-card>
                            </el-col>
                            <el-col :span="8">
                                <el-card shadow="hover"  class="workExperience">
                                    <div class="cardTitleStyle">
                                        <el-image  class="smallTitle" src="../../../static/img/jl.png"></el-image>
                                        <p>工作简历</p>
                                    </div>
                                    <el-col :span="24"  class="Secoll"  style="padding:0px 20px!important;">
                                        <el-timeline  :reverse="true">
                                            <el-timeline-item
                                                v-for="(activity, index) in handleWorkExperience(item.workExperience)"
                                                :key="index" style="text-align: left">
                                                {{activity}}
                                            </el-timeline-item>
                                        </el-timeline>
                                    </el-col>
                                    <el-col :span="6" :offset="19">
                                        <el-popover
                                            placement="right"
                                            width="400"
                                            trigger="hover">
                                            <el-timeline  :reverse="true">
                                                <el-timeline-item
                                                    v-for="(activity, index) in handleWorkExperience(item.workExperience)"
                                                    :key="index" style="text-align: left">
                                                    {{activity}}
                                                </el-timeline-item>
                                            </el-timeline>
                                            <span class="more" slot="reference">更多 >></span>
                                        </el-popover>
                                    </el-col>
                                </el-card>
                            </el-col>
                            <el-col :span="8">
                                <el-card shadow="hover"  class="repaid" >
                                    <div class="cardTitleStyle">
                                        <el-image  class="smallTitle" src="../../../static/img/bc.png"></el-image>
                                        <p>报酬情况</p>
                                    </div>
                                    <el-col :span="24" class="Secoll">
                                        <div v-if="item.rewards.length===0">
                                            <el-image  class="nullBg" src="../../../static/img/nrzw.png"></el-image>
                                        </div>
                                        <div v-else style="padding-left:20px">
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">获取时间</span>
                                                <span class="baseCardVal">{{item.rewards[0].achieveTime ? new Date(item.rewards[0].achieveTime).getFullYear() + '年' : '未填'}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">基本报酬(元/年)</span>
                                                <span class="baseCardVal">{{item.rewards[0].basicReward||0}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">考核报酬(元/年)</span>
                                                <span class="baseCardVal">{{item.rewards[0].reviewReward||0}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">增收奖励(元/年)</span>
                                                <span class="baseCardVal">{{item.rewards[0].otherReward||0}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">其他(元/年)</span>
                                                <span class="baseCardVal">{{item.rewards[0].des||0}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">总报酬(元/年)</span>
                                                <span class="baseCardVal">{{item.rewards[0].totalReward}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">佐证材料</span>
                                                <span class="baseCardVal">
                                                <el-popover
                                                    placement="right"
                                                    width="400"
                                                    trigger="hover" v-if="item.rewards[0].supportDoc">
                                                    <div v-for="subItem in handleImage(item.rewards[0].supportDoc)" >
                                                        <el-image :src="subItem"></el-image>
                                                    </div>
                                                    <el-button slot="reference" type="text"><i class="el-icon-picture"></i></el-button>
                                                </el-popover>
                                                <span v-else>暂无</span>
                                            </span>
                                            </el-col>
                                        </div>
                                    </el-col>
                                    <el-col :span="6" :offset="19">
                                        <el-popover
                                            placement="right"
                                            width="480"
                                            trigger="hover">
                                            <div class="popoverScroll">
                                                <div v-for="sub in item.rewards">
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">获取时间</span>
                                                        <span class="baseCardVal">{{sub.achieveTime ? new Date(sub.achieveTime).getFullYear() + '年' : '未填'}}</span>
                                                    </el-col>
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">基本报酬(元/年)</span>
                                                        <span class="baseCardVal">{{sub.basicReward||0}}</span>
                                                    </el-col>
                                                    <el-col :span="12"class="baseInfoCard">
                                                        <span class="baseCardLabel">考核报酬(元/年)</span>
                                                        <span class="valueStyle">{{sub.reviewReward}}</span>
                                                    </el-col>
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">增收奖励(元/年)</span>
                                                        <span class="baseCardVal">{{sub.otherReward||0}}</span>
                                                    </el-col>
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">其他(元/年)</span>
                                                        <span class="baseCardVal">{{sub.des||0}}</span>
                                                    </el-col>
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">总报酬(元/年)</span>
                                                        <span class="baseCardVal">{{sub.totalReward||0}}</span>
                                                    </el-col>
                                                    <el-col :span="24" class="baseInfoCard" v-if="sub.supportDoc" >
                                                        <span class="baseCardLabel">佐证材料</span>
                                                        <div v-for="subItem in handleImage(sub.supportDoc)" class="popoverImage">
                                                            <el-image :src="subItem" ></el-image>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="24" class="baseInfoCard" v-else>
                                                        <span class="baseCardLabel">佐证材料</span>
                                                        <span class="baseCardLongVal">暂无</span>
                                                    </el-col>
                                                    <hr class="popoverLine">
                                                </div>
                                            </div>
                                            <span class="more" slot="reference" v-if="item.rewards.length>1">更多 >></span>
                                        </el-popover>
                                    </el-col>
                                </el-card>
                            </el-col>
                            
                        </el-row>
                        <el-row :gutter="40" style="margin-top: 40px">
                          <el-col :span="8">
                                <el-card shadow="hover"  class="inCountry">
                                    <div class="cardTitleStyle">
                                        <el-image  class="smallTitle" src="../../../static/img/relation.png"></el-image>
                                        <p>在村工作具有近亲属关系人员</p>
                                    </div>
                                    <el-col :span="24"  class="Secoll">
                                        <div v-if="item.familyWorkInfoVOS.length===0">
                                            <el-image  class="nullBg" src="../../../static/img/nrzw.png"></el-image>
                                        </div>
                                        <div v-else>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">姓名</span>
                                                <span class="baseCardVal">{{item.familyWorkInfoVOS[0].name}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">称谓</span>
                                                <span class="baseCardVal">{{item.familyWorkInfoVOS[0].appellation}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">政治面貌</span>
                                                <span class="baseCardVal">{{item.familyWorkInfoVOS[0].politicalStatus}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">职务</span>
                                                <span class="baseCardVal">{{item.familyWorkInfoVOS[0].job}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">在村工作时长</span>
                                                <span class="baseCardVal">{{item.familyWorkInfoVOS[0].duration ? item.familyWorkInfoVOS[0].duration + '年' : '暂无'}}</span>
                                            </el-col>
                                        </div>
                                    </el-col>
                                    <el-col :span="6" :offset="19">
                                        <el-popover
                                            placement="right"
                                            width="480"
                                            trigger="hover">
                                            <div class="popoverScroll">
                                                <div  v-for="sub in item.familyWorkInfoVOS">
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">姓名</span>
                                                        <span class="baseCardVal">{{sub.name}}</span>
                                                    </el-col>
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">称谓</span>
                                                        <span class="baseCardVal">{{sub.appellation}}</span>
                                                    </el-col>
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">政治面貌</span>
                                                        <span class="baseCardVal">{{sub.politicalStatus}}</span>
                                                    </el-col>
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">职务</span>
                                                        <span class="baseCardVal">{{sub.job}}</span>
                                                    </el-col>
                                                    <el-col :span="24" class="baseInfoCard">
                                                        <span class="baseCardLabel">在村工作时长</span>
                                                        <span class="baseCardLongVal">{{sub.duration ? sub.duration + '年' : '暂无'}}</span>
                                                    </el-col>
                                                    <hr class="popoverLine">
                                                </div>
                                            </div>
                                            <span class="more" slot="reference" v-if="item.familyWorkInfoVOS.length>1">更多 >></span>
                                        </el-popover>
                                    </el-col>
                                </el-card>
                            </el-col>
                            <el-col :span="8">
                                <el-card shadow="hover" class="honer" >
                                    <div class="cardTitleStyle">
                                        <el-image  class="smallTitle"  src="../../../static/img/jc.png"></el-image>
                                        <p>奖惩情况</p>
                                    </div>
                                    <el-col :span="24" class="Secoll"  >
                                        <div v-if="item.honours.length===0">
                                            <el-image  class="nullBg" src="../../../static/img/nrzw.png"></el-image>
                                        </div>
                                        <div v-else>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">奖或惩</span>
                                                <span class="baseCardVal">{{item.honours[0].rewardsType}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">时间</span>
                                                <span class="baseCardVal">{{item.honours[0].achieveTime ? item.honours[0].achieveTime.slice(0,4) : '暂无'}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard" v-show="item.honours[0].rewardsType == '表彰'">
                                                <span class="baseCardLabel">表彰级别</span>
                                                <span class="baseCardVal">{{item.honours[0].honourDescription}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard" v-show="item.honours[0].rewardsType == '表彰'">
                                                <span class="baseCardLabel">特殊表彰</span>
                                                <span class="baseCardVal">{{item.honours[0].honourType||'暂无'}}</span>
                                            </el-col>
                                            <el-col :span="24" class="baseInfoCard" >
                                                <span class="baseCardLabel">奖惩内容</span>
                                                <span class="baseCardLongVal">{{item.honours[0].content||'暂无'}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">佐证材料</span>
                                                <span class="baseCardVal">
                                                <el-popover
                                                    placement="right"
                                                    width="400"
                                                    trigger="hover" v-if="item.honours[0].supportDoc">
                                                    <div v-for="subItem in handleImage(item.honours[0].supportDoc)" >
                                                        <el-image :src="subItem"></el-image>
                                                    </div>
                                                    <el-button slot="reference" type="text"><i class="el-icon-picture"></i></el-button>
                                                </el-popover>
                                                <span v-else>暂无</span>
                                            </span>
                                            </el-col>
                                        </div>
                                    </el-col>
                                    <el-col :span="6" :offset="19">
                                        <el-popover
                                            placement="right"
                                            width="480"
                                            trigger="hover">
                                            <div class="popoverScroll">
                                                <div v-for="sub in item.honours" >
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">奖或惩</span>
                                                        <span class="baseCardVal">{{sub.rewardsType}}</span>
                                                    </el-col>
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">时间</span>
                                                        <span class="baseCardVal">{{sub.achieveTime ? sub.achieveTime.slice(0,4) : '暂无'}}</span>
                                                    </el-col>
                                                    <el-col :span="12" class="baseInfoCard" v-show="sub.rewardsType == '表彰'">
                                                        <span class="baseCardLabel">表彰级别</span>
                                                        <span class="baseCardVal">{{sub.honourDescription}}</span>
                                                    </el-col>
                                                    <el-col :span="12" class="baseInfoCard" v-show="sub.rewardsType == '表彰'">
                                                        <span class="baseCardLabel">特殊表彰</span>
                                                        <span class="baseCardVal">{{sub.honourType||'暂无'}}</span>
                                                    </el-col>
                                                    <el-col :span="24" class="baseInfoCard" >
                                                        <span class="baseCardLabel">奖惩内容</span>
                                                        <span class="baseCardLongVal">{{sub.content}}</span>
                                                    </el-col>
                                                    <el-col :span="24" class="baseInfoCard" v-if="sub.supportDoc">
                                                        <span class="baseCardLabel">佐证材料</span>
                                                        <div v-for="subItem in handleImage(sub.supportDoc)" class="popoverImage">
                                                            <el-image :src="subItem"></el-image>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="24"  class="baseInfoCard" v-else>
                                                        <label><span class="baseCardLabel">佐证材料</span>
                                                            <span class="baseCardLongVal" >暂无</span>
                                                        </label>
                                                    </el-col>
                                                    <hr class="popoverLine">
                                                </div>
                                            </div>
                                            <span class="more" slot="reference" v-if="item.honours.length>1">更多 >></span>
                                        </el-popover>
                                    </el-col>
                                </el-card>
                            </el-col>
                        </el-row>
                    </swiper-slide>
                    <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
                    <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
                </swiper>
                <div v-if="cadList.length === 0">
                    <div :class="{nullCgb:true}"></div>
                    <div :class="{nullMessage:true}">&emsp;&emsp;暂无村干部信息！</div>
                </div>
            </el-col>
        </el-row>
        <el-dialog
            title="添加"
            :visible.sync="diaVis"
            width="880px"
            align="left"
            :modal-append-to-body='false'
            :append-to-body="true"
            :before-close="handleClose">
            <el-form :inline="true" :model="villageForm"  ref="villageForm" class="demo-form-inline" label-width="170px" >
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="villageForm.name"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer footer-position">
                <el-button type="primary" :loading="submitLoad" @click="handleVillage(villageForm)">添 加</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import Waterfall from 'vue-waterfall/lib/waterfall'
    import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'
    import { swiper, swiperSlide } from 'vue-awesome-swiper';
    import ReserveEdit from "@/components/reserve/ReserveEdit";
    import LookUp from '@/lookup'
    export default {
        name: "VillageDetail",
        props: {
            isFromList: {
                type: Boolean,
                default: false
            },
            isEdit: {
                type: Boolean,
                default: false
            },
        },
        data(){
            return{
                activities:[],
                user: {},
                isHasTask: false,
                endTime: "",
                swiperOptionTop: {
                    spaceBetween: 15,
                },
                swiperOptionThumbs: {
                    spaceBetween: 15,
                    loopAdditionalSlides : 2,
                    centeredSlides: true,
                    slidesPerView: 'auto',
                    touchRatio: 0.2,
                    slideToClickedSlide: true,
                    prevButton:'.swiper-button-prev',
                    nextButton:'.swiper-button-next',
                    onSlideChangeEnd: (swiper) => {
                        this.activeIndex = swiper.activeIndex;
                        this.currentSecretary = this.cadList[swiper.activeIndex];
                    },
                },
                cadList:[],
                zhenList : [],
                trackLoad:false,
                currentSecretary: {},
                currentTownIndex: 0,
                currentCunIndex: 0,
                activeIndex: 0,
                queryVal: '',
                villageList:[],
                cunId : '',
                diaVis:false,
                villageForm:{},
                submitLoad:false,
                currentVillage: {}
            }
        },
        methods:{
            //身份证移入的效果
            sfzCl:function (clPhone) {
                this.zzcl = clPhone;
            },
            leave:function () {
                this.zzcl = '../../../static/img/zwzz.png';
            },
            //工作简历时间线
            handleWorkExperience(workExperience) {
                if (!workExperience) {
                    return ["暂无工作简历信息！"];
                }
                let arr = []
                workExperience.split(/[\n]/).forEach(item => {
                  console.log(item.replace(/,/g,""),'item');
                  let str = ''
                  str = item.replace(/,/g,"");
                  arr.push(str)
                })
                var index = arr.length - 1
                if (index > -1) {
                      arr.splice(index, 1);
                  }
                return arr
            },
            shRcord(id){
                console.log(id)
                this.$http('POST',`identity/informationAudit/list?sort=createdAt,desc`,
                    {villageId: id ,processType:'村干部信息更新'},false).then(data => {
                    this.activities = [];
                    for (let i=0;i<data.length;i++){
                        let obj = {};
                        obj.modifiedAt = new Date(data[i].modifiedAt).Format("yyyy-MM-dd HH:mm");
                        obj.auditor = data[i].auditor;
                        obj.auditAdvice = data[i].auditAdvice;
                        obj.status = data[i].status;
                        this.activities.push(obj);
                    }
                });
            },
            showBaseInfo(districtId){
                return this.$http('POST',`identity/villageCadres/list`, {cadresType: "OUT_SECRETARY",districtId: districtId, hasRetire: '0'},false).then(data => {
                    this.trackLoad = false;
                    // for(){

                    // }
                    return data
                });
            },
            loadByQueryVal(val){
                return this.$http('POST',`identity/villageCadres/list`, {name: this.queryVal},false).then(data => {
                    this.cadList = data;
                    this.currentSecretary = data[0];
                    this.trackLoad = false;
                });
            },
            // handleWorkExperience(workExperience) {
            //     if (!workExperience) {
            //         return ["暂无工作简历信息！"];
            //     }
            //     return workExperience.split(/[\n]/);
            // },
            handleImage(imageUrl){
                let arr = [];
                if(imageUrl){
                    if(imageUrl.indexOf(',')>-1){
                        imageUrl.split(',').forEach(item => {
                            arr.push(item.split('&')[0]);
                        })
                    }else{
                        arr.push(imageUrl.split('&')[0]);
                    }
                }
                return arr;
            },
            checkIsHasTask() {
                this.$http("POST", '/identity/cadreTask/getCurrentTask/村干部信息更新', {}, false).then(
                    data => {
                        if (data) {
                            this.isHasTask = true;
                            this.endTime = data.endTime;
                        }
                    }
                )
            },
            initCadresList(districtId, index) {
                this.currentCunIndex = 0;
                this.currentTownIndex = index;
                this.$store.state.towns.forEach(item=>{
                    if(item.districtId==districtId){
                        this.villageList = item.orgChildren;
                        this.cunId = this.villageList[0].districtId;
                    }
                });
            },
            initCadresList1(item, index) {
                this.currentCunIndex = index;
                this.cunId = item.districtId
                this.currentVillage = item
                this.trackLoad = true;
                this.$nextTick(_ => {
                    this.showBaseInfo(item.districtId).then(data => {
                        let dataIndex = Math.floor(data.length/2);
                            this.handleData(data)
                        // this.cadList = data;
                        // this.cadList = [];
                        // data.forEach(item => {
                        //   let obj = {}
                        //   if(JSON.stringify(item.villageCadresTemporaryes) !== '[]') {
                        //     obj = JSON.parse(item.villageCadresTemporaryes[0].cadresInfo)
                        //   } else {
                        //     obj = item
                        //   }
                        //   this.cadList.push(obj)
                        // })
                        this.currentSecretary = this.cadList[dataIndex];
                        this.$nextTick(() => {
                            const swiperTop = this.$refs.swiperTop.swiper;
                            const swiperThumbs = this.$refs.swiperThumbs.swiper;
                            this.swiper = swiperThumbs;
                            swiperTop.params.control = swiperThumbs;
                            swiperThumbs.params.control = swiperTop;
                            this.swiper.slideTo(dataIndex, 100, false);
                            this.trackLoad = false;
                        });
                    });
                });
            },
            // 村级
            // addVillage(){
            //     this.diaVis = true;
            //     this.villageForm = {
            //         districtId:this.user.districtId,
            //         districtName:this.user.organizationName,
            //         parentDistrictId:this.user.sysDistrict.orgParent,
            //         parentDistrictName:this.user.sysDistrict.parentName,
            //         hasRetire: "0",
            //         headSculpture: 'http://122.97.218.162:8888/g1/M00/00/B2/rBAAx151x-6AbVcSAAAJJXxlLy0086.png',
            //         state: "0",
            //         cadresType:"IN_SECRETARY"
            //     };
            // },
            // 镇级
            addVillage(){
                this.diaVis = true;
                this.villageForm = {
                    districtId:this.currentVillage.districtId,
                    districtName:this.currentVillage.districtName,
                    parentDistrictId:this.currentVillage.orgParent,
                    parentDistrictName:this.currentVillage.parentName,
                    hasRetire: "0",
                    headSculpture: 'http://122.97.218.162:8888/g1/M00/00/B2/rBAAx151x-6AbVcSAAAJJXxlLy0086.png',
                    state: "0",
                    cadresType:"OUT_SECRETARY"
                };
                console.log(this.villageForm,'villageForm');
            },
            leaveVillage(){
                this.$confirm('确定要删除当前村干部吗?', '确认', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(this.currentSecretary.id,"oo",this.currentSecretary.name)
                    this.$http('POST',`identity/villageCadres/cadresDeparture`,{cadresId:this.currentSecretary.id},false).then(data=>{
                        this.$message({
                            type:'success',
                            message:'离任成功！'
                        });
                        //刷新
                        this.trackLoad = true;
                        this.showBaseInfo(this.cunId).then(data => {
                            let dataIndex = Math.floor(data.length/2);
                            this.handleData(data)
                            // this.cadList = [];
                            // data.forEach(item => {
                            //   let obj = {}
                            //   if(JSON.stringify(item.villageCadresTemporaryes) !== '[]') {
                            //     obj = JSON.parse(item.villageCadresTemporaryes[0].cadresInfo)
                            //   } else {
                            //     obj = item
                            //   }
                            //   this.cadList.push(obj)
                            // })
                            this.currentSecretary = this.cadList[dataIndex];
                            // this.cadList = data;
                            this.$nextTick(() => {
                                this.trackLoad = false;
                                const swiperThumbs = this.$refs.swiperThumbs.swiper;
                                this.swiper = swiperThumbs;
                                this.swiper.slideTo(dataIndex, 100, false);
                            });
                        })
                    })
                }).catch(() => {

                });
            },
            handleClose(){
                this.diaVis = false;
                this.villageForm = {};
            },
            handleVillage(){
                this.submitLoad = true;
                this.$http('POST',`identity/villageCadres/`,this.villageForm,true).then(data=>{
                    this.diaVis = false;
                    //刷新
                    this.submitLoad = false;
                    this.trackLoad = true;
                    this.showBaseInfo(this.cunId).then(data => {
                        let dataIndex = Math.floor(data.length/2);
                        this.handleData(data)
                        // this.cadList = [];
                        // data.forEach(item => {
                        //   let obj = {}
                        //   if(JSON.stringify(item.villageCadresTemporaryes) !== '[]') {
                        //     obj = JSON.parse(item.villageCadresTemporaryes[0].cadresInfo)
                        //   } else {
                        //     obj = item
                        //   }
                        //   this.cadList.push(obj)
                        // })
                        this.currentSecretary = this.cadList[dataIndex];
                        // this.cadList = data;
                        this.$nextTick(() => {
                            this.trackLoad = false;
                            const swiperThumbs = this.$refs.swiperThumbs.swiper;
                            this.swiper = swiperThumbs;
                            this.swiper.slideTo(dataIndex, 100, false);
                        });
                    })
                })
            },
            handlePost(value){
                if(value){
                    let endValue = [];
                    if(value.indexOf(',')>0){
                        let arr = value.split(',');
                        arr.forEach(item=>{
                            endValue.push(LookUp['Post'].filter(sub=>sub.value===item)[0].label);
                        })
                    }else{
                        endValue.push(LookUp['Post'].filter(sub=>sub.value===value)[0].label);
                    }
                    return endValue.join('、');
                }else{
                    return '暂无'
                }
            },
            handleData(data){
              this.cadList = [];
              // console.log(data, 'datattttttttt');
                let newData = []
                data.forEach(item => {
                  let obj1 = {}
                  if (JSON.stringify(item.villageCadresTemporaryes) !== '[]') {
                    obj1 = JSON.parse(item.villageCadresTemporaryes[0].cadresInfo)
                    obj1.state = item.villageCadresTemporaryes[0].statue
                  } else {
                    obj1 = item
                  }
                  newData.push(obj1)
                })
                newData.forEach((item, index) => {
                  let obj = {}
                  if (item.state == '0') {
                    if (this.user.roleCode === 'COUNTRY_SIDE_ACTOR') {
                      obj = item
                      this.cadList.push(obj)
                    } else if (this.user.roleCode === 'TOWN_REVIEWER') {
                      obj = data[index]
                      obj.state = item.state
                      this.cadList.push(obj)
                    } else if (this.user.roleCode === 'CITY_LEADER') {
                      obj = data[index]
                      obj.state = item.state
                      this.cadList.push(obj)
                    }
                  } else if (item.state == '1') {
                    if (this.user.roleCode === 'COUNTRY_SIDE_ACTOR') {
                      obj = item
                      this.cadList.push(obj)
                    } else if (this.user.roleCode === 'TOWN_REVIEWER') {
                      obj = data[index]
                      obj.state = item.state
                      this.cadList.push(obj)
                    } else if (this.user.roleCode === 'CITY_LEADER') {
                      obj = data[index]
                      obj.state = item.state
                      this.cadList.push(obj)
                    }
                  } else if (item.state == '2') {
                    if (this.user.roleCode === 'COUNTRY_SIDE_ACTOR') {
                      obj = item
                      this.cadList.push(obj)
                    } else if (this.user.roleCode === 'TOWN_REVIEWER') {
                      obj = item
                      this.cadList.push(obj)
                    } else if (this.user.roleCode === 'CITY_LEADER') {
                      obj = data[index]
                      obj.state = item.state
                      this.cadList.push(obj)
                    }
                  } else if (item.state == '3') {
                    if (this.user.roleCode === 'COUNTRY_SIDE_ACTOR') {
                      obj = item
                      this.cadList.push(obj)
                    } else if (this.user.roleCode === 'TOWN_REVIEWER') {
                      obj = data[index]
                      obj.state = item.state
                      this.cadList.push(obj)
                    } else if (this.user.roleCode === 'CITY_LEADER') {
                      obj = data[index]
                      obj.state = item.state
                      this.cadList.push(obj)
                    }
                  }
                })
                console.log(newData, 'newData');
                // if(this.user.roleCode === 'COUNTRY_SIDE_ACTOR') {
                //   data.forEach((item, index) => {
                //     let obj = {}
                //     if (JSON.stringify(item.villageCadresTemporaryes) !== '[]') {
                //       obj = JSON.parse(item.villageCadresTemporaryes[0].cadresInfo)
                //     } else {
                //       obj = item
                //     }
                //     obj.state = newData[index].state
                //     this.cadList.push(obj)
                //     console.log(this.cadList,'-----------');


                //   })
                // } else if (this.user.roleCode === 'TOWN_REVIEWER') {
                //   data.forEach((item, index)  => {
                //     let obj = {}
                //     if (item.state == '2') {
                //       if (JSON.stringify(item.villageCadresTemporaryes) !== '[]') {
                //         obj = JSON.parse(item.villageCadresTemporaryes[0].cadresInfo)
                //       } else {
                //         obj = item
                //       }
                //       obj.state = item.state
                //       this.cadList.push(obj)
                //     } else {
                //       obj = item
                //       obj.state = newData[index].state
                //       this.cadList.push(obj)
                //     }
                //   })
                // } else if(this.user.roleCode === 'CITY_LEADER') {
                //     data.forEach((item, index)  => {
                //       let obj = {}
                //       // if (JSON.stringify(item.villageCadresTemporaryes) !== '[]') {
                //       //   obj = JSON.parse(item.villageCadresTemporaryes[0].cadresInfo)
                //       // } else {
                //       obj = item
                //       // }
                //       obj.state = newData[index].state
                //       this.cadList.push(obj)
                //     })
                //     // obj = item
                //   }
                
            }
        },
        components:{
            Waterfall,
            WaterfallSlot,
            swiper,
            swiperSlide,
            ReserveEdit
        },
        created(){
          this.user = JSON.parse(sessionStorage.getItem('userInfo'));
          console.log(this.user);
          let districtId = this.user.districtId;
          this.trackLoad = true;
          if (this.user.roleCode === 'CITY_LEADER') {
            this.zhenList = JSON.parse(sessionStorage.getItem('towns'));
            // console.log(this.$store.state,'this.$store.state');
            // console.log(this.$store.state['towns'],'this.$store.state.towns');
            console.log(this.zhenList,'this.zhenList');
              this.villageList = this.zhenList[0].orgChildren;
              this.cunId = this.villageList[0].districtId;
          }else  if(this.user.roleCode === 'COUNTRY_SIDE_ACTOR'){
              this.cunId = districtId;
          } else {
              JSON.parse(sessionStorage.getItem('towns')).forEach(item=>{
                  if(item.districtId==districtId){
                      this.villageList = item.orgChildren;
                      this.cunId = this.villageList[0].districtId;
                      this.currentVillage = this.villageList[0]

                  }
              });
          }
          // console.log(this.villageList,'this.villageList');
        },
        mounted() {
            // this.user = this.$store.state.userInfo;
            // let districtId = this.user.districtId;
            // this.trackLoad = true;
            // if (this.user.roleCode === 'CITY_LEADER') {
            //   this.zhenList = this.$store.state.towns;
            //   console.log(this.zhenList,'this.zhenList');
            //     this.villageList = this.zhenList[0].orgChildren;
            //     this.cunId = this.villageList[0].districtId;
            // }else  if(this.user.roleCode === 'COUNTRY_SIDE_ACTOR'){
            //     this.cunId = districtId;
            // } else {
            //     this.$store.state.towns.forEach(item=>{
            //         if(item.districtId==districtId){
            //             this.villageList = item.orgChildren;
            //             this.cunId = this.villageList[0].districtId;
            //         }
            //     });
            // }
            this.$nextTick(() => {
                let districtId = this.user.districtId;
                // if (this.user.roleCode === 'CITY_LEADER') {
                //     this.$http('POST',`identity/sysDistrict/page?page=0&size=15`, {districtLevel: 2, districtType:"Party"},false).then(data => {
                //         this.showBaseInfo(this.cunId).then(data => {
                //             let dataIndex = Math.floor(data.length/2);
                //             this.currentSecretary = data[dataIndex];
                //             this.cadList = data;
                //             this.$nextTick(() => {
                //                 if (!this.isEdit) {
                //                     const swiperTop = this.$refs.swiperTop.swiper;
                //                     const swiperThumbs = this.$refs.swiperThumbs.swiper;
                //                     this.swiper = swiperThumbs;
                //                     swiperTop.params.control = swiperThumbs;
                //                     swiperThumbs.params.control = swiperTop;
                //                     this.swiper.slideTo(dataIndex, 100, false);
                //                 } else {
                //                     const swiperThumbs = this.$refs.swiperThumbs.swiper;
                //                     this.swiper = swiperThumbs;
                //                     this.swiper.slideTo(dataIndex, 100, false);
                //                 }
                //                 /*swiperThumbs.slideNext();*/
                //                 this.trackLoad = false;
                //             });
                //         })

                //     });
                // } else {
                    this.showBaseInfo(this.cunId).then(data => {
                      let dataIndex = Math.floor(data.length/2);
                      console.log(data,'data');
                      console.log(dataIndex,'dataIndex');
                      this.handleData(data)
                        // this.cadList = [];
                        // let newData = []
                        // let oldData = data
                        // data.forEach(item => {
                        //   let obj = {}
                        //   if(JSON.stringify(item.villageCadresTemporaryes) !== '[]') {
                        //     obj = JSON.parse(item.villageCadresTemporaryes[0].cadresInfo)
                        //     obj.state = item.state
                        //   } else {
                        //     obj = item
                        //   }
                        //   newData.push(obj)
                        // })
                        // if (this.user.roleCode === 'COUNTRY_SIDE_ACTOR') {
                        //   if (JSON.stringify(newData) !== '[]') {
                        //     this.cadList = newData
                        //   } else {
                        //     this.cadList = oldData
                        //   }
                        // } else if (this.user.roleCode === 'TOWN_REVIEWER') {
                        //   if (data.state == '2') {
                        //     this.cadList = newData
                        //   } else {
                        //     this.cadList = oldData
                        //   }
                        // } else if (this.user.roleCode === 'CITY_LEADER') {
                        //   this.cadList = oldData
                        // }
                        this.currentSecretary = this.cadList[dataIndex];
                        console.log(this.cadList, 'this.cadList');
                        this.$nextTick(() => {
                            this.trackLoad = false;
                            if (!this.isEdit) {
                                const swiperTop = this.$refs.swiperTop.swiper;
                                const swiperThumbs = this.$refs.swiperThumbs.swiper;
                                this.swiper = swiperThumbs;
                                swiperTop.params.control = swiperThumbs;
                                swiperThumbs.params.control = swiperTop;
                                this.swiper.slideTo(dataIndex, 100, false);
                            } else {
                                const swiperThumbs = this.$refs.swiperThumbs.swiper;
                                this.swiper = swiperThumbs;
                                this.swiper.slideTo(dataIndex, 100, false);
                            }
                            /*swiperThumbs.slideNext();*/
                        });
                    })
                // }

            });
            this.checkIsHasTask();

        }
    }
</script>
<style lang='scss'>
    .VillageDetail {
        padding: 10px 20px;
        min-height: 750px;
    }
    
    .town-btn-active {
        background: url("../../../static/img/secretary/btn-active.png");
        width: 122px;
        height: 35px;
        line-height: 14px;
        display: inline-block;
        background-size: cover;
        margin: 10px 4px;
        transition: all .2s;
    }
    .town-btn-active .el-button span {
        color: white;
        line-height: 16px;
        font-size: 16px;
        font-family: "SimHei";
    }
    .town-btn-active1 {
        background-color: #43A047;
        // width: 115px;
        padding: 0 15px;

        height: 35px;
        line-height: 14px;
        display: inline-block;
        background-size: cover;
        margin: 10px 4px;
        transition: all .2s;
        border-radius: 5px;
    }
    .town-btn-active1 .el-button span {
        color: white;
        line-height: 16px;
        font-size: 16px;
        font-family: "SimHei";
    }
    .town-btn-active2 {
        border: 1px solid #43A047;
        // width: 115px;
        padding: 0 15px;

        height: 35px;
        line-height: 14px;
        display: inline-block;
        background-size: cover;
        margin: 10px 4px;
        transition: all .2s;
        border-radius: 5px;
    }
    .town-btn-active2 .el-button span {
        color: #43A047;
        line-height: 16px;
        font-size: 16px;
        font-family: "SimHei";
    }
    .town-btn .el-button span {
        color: red;
        line-height: 16px;
        font-size: 16px;
        font-family: "SimHei";
    }
    .town-btn1 {
        // width: 115px;
        height: 35px;
        line-height: 14px;
        display: inline-block;
        background-size: cover;
        margin: 10px 4px;
        transition: all .2s;
        border-radius: 5px;
        border: 1px solid #43A047;
        padding: 0 15px;
        background: rgba(67, 160, 71, .5);
    }
    .town-btn1 .el-button span {
        color: #43A047;
        line-height: 16px;
        font-size: 16px;
        font-family: "SimHei";
    }
    .badge_item {
      /* margin-top: 10px; */
      // .el-badge__content.is-fixed {
      //   top: 50%!important;
      //   right: 2px!important;
      // }
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      line-height: 20px!important;
      text-align: center;
      color: #fff!important;
      font-size: 14px!important;
    }
    .badge_item_less {
      background-color: #999!important;
    }
    .badge_item_active {
      background-color: #43A047!important;
    }
    .badge_item_great {
      background-color: #FF1E10!important;
    }
    .town-btn2 {
        // width: 115px;
        padding: 0 15px;

        height: 35px;
        line-height: 14px;
        display: inline-block;
        background-size: cover;
        margin: 10px 4px;
        transition: all .2s;
        border-radius: 5px;
        border: 1px solid #999;
        cursor: pointer;
    }
    .town-btn2 .el-button span {
        color: #999;
        line-height: 16px;
        font-size: 16px;
        font-family: "SimHei";
    }
    .VillageDetail .el-form-item__label {
        color: #7b8384;
    }
    .VillageDetail .el-card__body{
        padding: 0px;
    }
    .baseInfoDiv.insurance_line {
      float: left;
      width: 50%;
    }
</style>
<style scoped>
    .nullMessage {
        position: relative;
        margin: 0 auto;
        color: #777;
        font-size: 16px;
    }
    .nullCgb {
        width: 255px;
        height: 200px;
        background-size: 100%,100%;
        background-image: url("../../../static/messageBg/null.png");
        position: relative;
        margin: 100px auto 20px auto;
    }
    .nullBg {
        width: 220px;
        height: 160px;
        background-size: 100%, 100%;
        margin: 0 auto;
    }
    .baseMassage {
        background-image: url("../../../static/messageBg/cardBg.png");
        background-size: 100% 100%;
    }
    .workMessage {
        background-image: url("../../../static/messageBg/workMessageBg.png");
        background-size: 100% 100%;
    }
    .workExperience {
        height: 330px;
        background-image: url("../../../static/messageBg/workExperienceBg.png");
        background-size: 100% 100%;
    }
    .repaid {
        height: 330px;
        background-image: url("../../../static/messageBg/repaidBg.png");
        background-size: 100% 100%;
    }
    .family {
        height: 300px;
        background-image: url("../../../static/messageBg/familyBg.png");
        background-size: 100% 100%;
    }
    .inCountry {
        height: 300px;
        background-image: url("../../../static/messageBg/inCountryBg.png");
        background-size: 100% 100%;
    }
    .train {
        height: 300px;
        background-image: url("../../../static/messageBg/trainBg.png");
        background-size: 100% 100%;
    }
    .honer {
        height: 300px;
        background-image: url("../../../static/messageBg/honerBg.png");
        background-size: 100% 100%;
    }
    .assessment {
        height: 300px;
        background-image: url("../../../static/messageBg/assessmentBg.png");
        background-size: 100% 100%;
    }

    .gallery-top {
        height: 80%;
        width: 100%;
    }
    .gallery-thumbs {
        height: 20%;
        box-sizing: border-box;
    }
    .gallery-thumbs .swiper-slide {
        width: 170px;
        height: 245px;
        opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide .head-list-item {
        width: 150px;
        height: 225px;
        margin: 10px 0;
        position: relative;
        transition: all .4s;
    }
    .gallery-thumbs .swiper-slide-active {
        opacity: 1;
    }
    .gallery-thumbs .swiper-slide-active .head-list-item {
        opacity: 1;
        box-shadow: 0 2px 12px 0 rgba(255, 19, 1, 0.3);
        transform: translateY(-10px) scale(1.1);
    }


    .VillageDetail .cardTitleStyle{
        position: relative;
        text-align: left;
        font-size: 18px;
        font-weight: bold;
        margin:20px 20px 30px 20px ;
        color: #B50C0A;

    }
    .name-post {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
        background-color: rgba(64, 158, 255, .8);
        position: relative;
        top: -40px;
        height: 34px;
        overflow: hidden;
    }
    .name-post1 {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
        position: relative;
        top: -40px;
        height: 34px;
        overflow: hidden;
    }
    .VillageDetail .smallTitle{
        vertical-align: middle;
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 3px;
        margin-right: 3px;
    }
    .VillageDetail .Secoll{
        height: 180px;
        overflow: hidden;
        padding: 0px!important;
    }
    .VillageDetail .more{
        width:100px;
        height:14px;
        font-size:14px;
        font-family:Source Han Sans CN;
        font-weight:400;
        color:rgba(181,12,10,1);
        line-height:30px;
        cursor: pointer;
    }
    .lableColor{
        font-size:16px;
        font-family:Source Han Sans CN;
        font-weight:400;
        color:rgba(169,5,2,1);
        line-height:30px;
    }
    .valueStyle {
        font-size:16px;
        font-family:Source Han Sans CN;
        font-weight:400;
        color:rgba(57,57,57,1);
        line-height:30px;
    }
    .VillageDetail .el-card{
        border: 1px solid #FD9090!important;
    }
    .VillageDetail .support-area {
        position: relative;
        top: -4px;
    }
    .VillageDetail .baseInfoDiv{
        font-size: 14px;
        line-height: 40px;
    }
    .baseInfoDiv span span {
        vertical-align: middle;
    }
    .VillageDetail .baseLabel{
        width: 105px;
        display: inline-block;
        text-align: right;
        vertical-align: top;
        color: rgba(169,5,2,1);
    }
    .VillageDetail .baseVal{
        width: 170px;
        display: inline-block;
        text-align: center;
        vertical-align: top;
    }
    .baseInfoCard{
        font-size: 14px;
        line-height: 34px;
        padding: 0!important;
        text-align: left;
    }
    .baseCardLabel{
        width: 100px;
        display: inline-block;
        text-align: right;
        vertical-align: top;
        color: rgba(169,5,2,1);
    }
    .baseCardVal{
        width: 115px;
        display: inline-block;
        text-align: left;
        vertical-align: top;
        margin-left: 6px;
    }
    .baseCardLongVal{
        width: 285px;
        display: inline-block;
        text-align: left;
        vertical-align: top;
        margin-left: 6px;
    }
    .popoverLine{
        border:1px dotted rgba(145, 145, 145, 0.38);
    }
    .popoverScroll{
        overflow-x: scroll;
        max-height: 700px;
    }
    .popoverImage{
        width: 350px;
        margin-left: 30px;
    }
    .VillageDetail el-col{
        padding: 0px!important;
    }

</style>
<style>
    .badge_tooltip.is-light{
      /* background: ; */
      /* color: transparent; */
      background-color:#F3FEFF!important;
      color: #999999!important;
      border: 1px solid #999;
    }
    .badge_tooltip.badge_tooltip_less {
      background-color:#F3FEFF!important;
      color: #999999!important;
      border: 1px solid #999;
    }
    .badge_tooltip.badge_tooltip_great {
      background-color:#F3FEFF!important;
      color: #FF1E10!important;
      border: 1px solid #FF1E10;
    }
    .badge_tooltip.el-tooltip__popper {
      font-size: 14px;
      line-height: 20px;
    }
</style>
